<template>
  <el-form
    ref="queryForm"
    class="query-form"
    :model="queryForm"
    label-suffix="："
    inline
    size="small"
    status-icon
    label-position="right"
  >
    <el-form-item :prop="PROPS.user">
      <el-input
        v-model.trim="queryForm[PROPS.user]"
        class="common-query-form-item-width-sm"
        clearable
        :placeholder="`请输入${LABELS.user}`"
        @clear="getDataList"
        @keydown.enter.native="getDataList"
      >
      </el-input>
    </el-form-item>

    <el-form-item :prop="PROPS.id">
      <el-input
        v-model.trim="queryForm[PROPS.id]"
        class="common-query-form-item-width-sm"
        clearable
        :placeholder="`请输入${LABELS.id}`"
        @clear="getDataList"
        @keydown.enter.native="getDataList"
      >
      </el-input>
    </el-form-item>

    <el-form-item :prop="PROPS.ip">
      <el-input
        v-model.trim="queryForm[PROPS.ip]"
        class="common-query-form-item-width-sm"
        clearable
        :placeholder="`请输入${LABELS.ip}`"
        @clear="getDataList"
        @keydown.enter.native="getDataList"
      >
      </el-input>
    </el-form-item>

    <el-form-item :prop="PROPS.type">
      <el-select
        v-model="queryForm[PROPS.type]"
        class="common-query-form-item-width-sm"
        :placeholder="LABELS.type"
        clearable
        @change="getDataList"
      >
        <el-option
          v-for="item in $store.state.data.FORM_OPTION_MAP[OPTION_KEYS.type]"
          :key="item.status"
          :label="item.label"
          :value="item.label"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item :prop="PROPS.module">
      <el-input
        v-model.trim="queryForm[PROPS.module]"
        class="common-query-form-item-width-sm"
        clearable
        :placeholder="`请输入${LABELS.module}`"
        @clear="getDataList"
        @keydown.enter.native="getDataList"
      >
      </el-input>
    </el-form-item>

    <el-form-item :prop="PROPS.result">
      <el-select
        v-model="queryForm[PROPS.result]"
        class="common-query-form-item-width-sm"
        :placeholder="LABELS.result"
        clearable
        @change="getDataList"
      >
        <el-option
          v-for="item in $store.state.data.FORM_OPTION_MAP[OPTION_KEYS.result]"
          :key="item.status"
          :label="item.label"
          :value="item.label"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item :prop="PROPS.createdAt"> </el-form-item>
    <el-form-item :prop="PROPS.createdAt">
      <TRangePicker
        v-model="queryForm[PROPS.createdAt]"
        class="common-query-form-item-width-lg"
        format="YYYY-MM-DD"
        valueFormat="YYYY-MM-DD HH:mm:ss"
        :placeholder="[LABELS.createdAt, LABELS.createdAt]"
        @ok="getDataList"
        @change="Array.isArray(queryForm[PROPS.createdAt]) && queryForm[PROPS.createdAt].length == 0 && getDataList()"
      />
    </el-form-item>

    <el-form-item>
      <t-button class="common-search-btn" type="primary" @click="getDataList">查 询</t-button>
      <t-button
        type="default"
        class="common-search-btn"
        plain
        @click="
          $refs.queryForm.resetFields();
          getDataList(true);
        "
        >重 置
      </t-button>
    </el-form-item>
  </el-form>
</template>

<script>
import moment from "moment";
import config from "../config";
import daterangePickerMixin from "@/mixin/daterange-picker";

export default {
  name: "QueryForm",
  components: {},
  mixins: [daterangePickerMixin],
  props: {
    getDataList: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      ...config,
      queryForm: {
        [config.PROPS.user]: "",
        [config.PROPS.id]: "",
        [config.PROPS.ip]: "",
        [config.PROPS.type]: "",
        [config.PROPS.module]: "",
        [config.PROPS.result]: "",
        [config.PROPS.createdAt]: [],
      },
    };
  },
  computed: {},
  methods: {
    moment,
  },
};
</script>

<style lang="scss" scoped></style>
